<template>
  <div class="product-config-dialog">
    <el-button type="primary" icon="el-icon-plus" plain @click="visible = true"> 添加 </el-button>
    <common-dialog :visible.sync="visible" :confirm="handleConfigConfirm">
      <el-tabs v-model="activeName">
        <el-tab-pane label="待选" name="notSelected">
          <hzhy-data-table
            ref="dataListTable"
            v-bind="tableListConfig"
            :defaultSelected="value"
            @onSelectionChange="onSelectionChange"
          ></hzhy-data-table>
        </el-tab-pane>
        <el-tab-pane label="已选" name="selected">
          <span slot="label">
            <el-badge :value="selected.length" :max="99" class="item"> 已选 </el-badge>
          </span>
          <hzhy-data-table
            ref="defaultDataTable"
            v-bind="tableDefaultConfig"
            :defaultData="selected"
          ></hzhy-data-table>
        </el-tab-pane>
      </el-tabs>
    </common-dialog>
  </div>
</template>

<script>
import _clonedeep from 'lodash.clonedeep'
import CommonDialog from '@/components/common-dialog'

import * as api from '@/const/api'

export default {
  components: {
    CommonDialog,
  },
  props: {
    value: {
      type: [Array, String],
      default: () => [],
    },
  },
  data() {
    return {
      selected: [],
      activeName: 'notSelected',
      visible: false,
    }
  },
  computed: {
    tableListConfig() {
      return {
        persistSelection: true,
        url: api.solutionPage,
        customQuery: {
          solutionClassificationType: 2,
        },
        columns: [
          {
            type: 'selection',
            fixed: 'left',
          },
          {
            label: '序号',
            type: 'index',
            prop: 'index',
          },
          {
            label: '产品名称(名称)',
            prop: 'titleZh',
            minWidth: 120,
          },
          {
            label: '产品名称(英文)',
            prop: 'titleEn',
            minWidth: 120,
          },
          {
            label: '副标题(中文)',
            prop: 'subtitleZh',
            minWidth: 120,
          },
          {
            label: '副标题(英文)',
            prop: 'subtitleEn',
            minWidth: 120,
          },
          {
            label: '封面图',
            prop: 'coverImage',
            minWidth: 120,
            formatter: ({ coverImage }) => {
              if (!coverImage) {
                return ''
              }

              return (
                <img
                  src={coverImage}
                  onClick={() => window.open(coverImage)}
                  style="cursor: pointer;max-width: 60px;height:32px;display: block;"
                />
              )
            },
          },
        ],
        searchForm: [
          {
            $type: 'input',
            $id: 'titleZh',
            label: '标题',
            $el: {
              clearable: true,
              placeholder: '请输入',
            },
          },
        ],
      }
    },
    tableDefaultConfig() {
      const columns = this.tableListConfig.columns.filter(({ type }) => type !== 'selection')

      return {
        columns: [
          ...columns,
          {
            label: '操作',
            prop: 'operation',
            width: 80,
            fixed: 'right',
            setBtns: (_, index) => {
              return [
                {
                  label: '删除',
                  className: 'red',
                  handler: () => {
                    this.handleRowDelete(index)
                  },
                },
              ]
            },
          },
        ],
      }
    },
  },
  watch: {
    // 监听弹层显示
    visible: {
      handler(val) {
        // 弹层显示，刷新页面
        if (!val) {
          return
        }
        this.selected = [...this.value]
        this.activeName = 'notSelected'
      },
    },
  },
  methods: {
    async handleConfigConfirm() {
      if (!this.selected.length) {
        this.$message.error('未勾选数据')
        return false
      }
      this.$emit('input', _clonedeep(this.selected))
    },
    handleRowDelete(index) {
      this.selected.splice(index, 1)
      this.$refs.dataListTable && this.$refs.dataListTable.setSelected(this.selected)
    },
    onSelectionChange(val) {
      this.selected = _clonedeep(val)
    },
  },
}
</script>

<style lang="less" scoped>
.product-config-dialog {
  :deep(.el-dialog) {
    .el-dialog__header {
      padding: 0;
      margin: 0;
    }

    .el-tabs {
      padding: 0;
      height: calc(97vh - 144px);
      overflow: hidden;

      .el-tabs__content {
        height: calc(100% - 58px);
        overflow-y: auto;
      }
    }

    .el-badge__content {
      height: 20px;
      width: 20px;
      border: none;
      background-color: #f5222d;
      padding: 0;

      &.is-fixed {
        top: 10px;
        right: 5px;
      }
    }

    .el-tabs__nav-wrap::after {
      height: 1px;
    }
  }
}
</style>
